<template>
	<view class="content">
		<view class="tab">
			<view class="tab_item" :class="tabIndex? 'tab_sel':''" @click="tab(true)">
				<view class="t_i_text">还款列表</view>
				<view v-if="tabIndex" class="t_i_line"></view>
			</view>
			<view class="tab_item" :class="!tabIndex? 'tab_sel':''" @click="tab(false)">
				<view class="t_i_text">已还清借款</view>
				<view v-if="!tabIndex" class="t_i_line"></view>
			</view>
		</view>
		<view class="kon">
			<view class="search">
				<uni-icons type="search" class="icon" size="26" color="#999999"></uni-icons>
				<input type="text" confirm-type="search" placeholder-class="pla" placeholder="搜索" v-model="name"
					@confirm="sou" />
				<uni-icons v-if="name" @click="clean()" type="close" class="icon" size="26" color="#999999"></uni-icons>
				<view class="s_btn" @click="sou()">搜索</view>
			</view>
		</view>
		<view class="info" v-for="item in list" @click="details(item)"
			v-if="tabIndex &&item.deal_status!=5 ||!tabIndex">
			<view class="item">
				<view class="phone" @click.stop="call(item)">借款人：{{item.name}} {{item.mobile}}
					<uni-icons color="#E99552" class="icon" type="phone" size="22"></uni-icons>
				</view>
				<view>借款金额：<text>￥{{ item.borrow_amount}}</text></view>
				<view>借款用途：{{item.usage}} </view>
				<!-- <view>已还金额：<text>￥{{item.pay_money}}</text></view> -->
				<view>已还本金：<text>￥{{item.true_self_money}}</text></view>
				<view>已还利息：<text>￥{{item.true_interest_money}}</text></view>
				<view v-if="item.deal_status==4">下个还款日：{{item.next_date}}</view>
				<view v-if="tabIndex&&item.publish_wait==3">审核失败原因：{{item.delete_msg}} </view>
				<view v-if="item.deal_status==5">还清日期：{{item.last_repay_time}}</view>
			</view>
			<view class="imgs">
				<view @click.stop="plan(item.id)">
					<!-- <view @click.stop="plan(item.ids)"> -->
					<image src="@/static/img/user_icon.png" mode="widthFix"></image>
					<text>还款计划</text>
				</view>
				<!-- <image v-if="tabIndex&&item.publish_wait==1" src="@/static/img/user_img1.png" mode="widthFix"></image>
				<image v-if="tabIndex&&item.publish_wait==3" src="@/static/img/user_img3.png" mode="widthFix"></image>
				<image v-if="tabIndex&&item.publish_wait==0" src="@/static/img/user_img4.png" mode="widthFix"></image>
				<image v-if="tabIndex&&item.publish_wait==2" src="@/static/img/user_img6.png" mode="widthFix"></image> -->
				<image v-if="item.deal_status==4" src="@/static/img/user_img2.png" mode="widthFix"></image>
				<image v-if="item.deal_status==5" src="@/static/img/user_img5.png" mode="widthFix"></image>
			</view>
		</view>

		<image v-if="list.length<1" class="none" src="@/static/img/img_none.png" mode="widthFix"></image>

		<!-- <view class="info" v-for="item in 5">
			<view class="i_title">我要买房贷款</view>
			<view class="item">
				<view>借款金额</view>
				<view>￥80000.00</view>
			</view>
			<view class="item">
				<view>年利率</view>
				<view>4.00%</view>
			</view>
			<view class="item">
				<view>期限</view>
				<view>1个月</view>
			</view>
			<view class="item">
				<view>还款日</view>
				<view>2024-04-06</view>
			</view>
			<view class="item">
				<view>本期还款</view>
				<view>￥80266.67</view>
			</view>
			<view class="item">
				<view>逾期/违约金</view>
				<view>￥0.00</view>
			</view>
			<view class="item">
				<view>已还本息</view>
				<view>￥0.00</view>
			</view>
			<view class="i_btns" v-if="tabIndex==0">
				<view class="" @click="ahead">提前还款</view>
				<view class="" @click="affirm">还款</view>
			</view>
			<view v-if="tabIndex==1" class="i_btn_see" @click="details">查看详情</view>
		</view>
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="box">
				<view class="title">温馨提示</view>
				<view class="text">提前还款会将借款一次性还清，并计算 违约金！</view>
				<view class="btns">
					<view class="" @click="cancel">取消</view>
					<view class="">确定</view>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import {
		loanInfo,
		loanInfoTwo
	} from '@/common/js/index.js'
	export default {
		data() {
			return {
				title: 'Hello',
				topheight: uni.getStorageSync('topHeight'),
				totalheight: uni.getStorageSync('totalHeight'),
				navheight: uni.getStorageSync('navHeight'),
				tabIndex: true,
				page: 1,
				status: 4,
				list: '',
				name: '',
				isAll: false,
			}
		},
		onLoad() {
			this.info()
		},
		methods: {
			sou(e) {
				// console.log(e.detail.value);
				// this.name = e.detail.value
				this.info()
			},
			clean() {
				this.page = 1
				this.name = ''
				this.info()
			},
			plan(e) {
				uni.navigateTo({
					url: '/pages/user/plan?id=' + e
				})
			},
			info() {
				loanInfoTwo({
					page: this.page,
					name: this.name,
					deal_stauts: this.tabIndex ? '4' : '5'
				}).then(res => {
					// this.list = res.data.wait_list.data
					var info = this.list
					if (this.page == 1) {
						this.list = res.data.wait_list.data
					} else {
						this.list = info.concat(res.data.wait_list.data)
					}
					this.isAll = this.list.length <10 ? false : true
					console.log(res);
				})
			},
			tab(e) {
				this.tabIndex = e
				this.page = 1
				this.info()
			},
			affirm() {
				uni.navigateTo({
					url: '/pages/me/repayAffirm'
				})
			},
			call(e) {
				uni.makePhoneCall({
					phoneNumber: e.mobile //仅为示例
				});
			},
			details() {
				// uni.navigateTo({
				// 	url: '/pages/me/repayDetails'
				// })
			},
			change() {},
			cancel() {
				this.$refs.popup.close()
			},
			ahead() {
				this.$refs.popup.open('center')
			}
		},
		onReachBottom() {
			console.log(this.isAll);
			if (this.isAll) {
				this.page++;
				this.info()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		/* background: white; */
		position: relative;
		overflow: hidden;
		padding-top: 120rpx;
		// padding-top: 240rpx;
	}

	.tab {
		width: calc(100vw - 200rpx);
		height: 120rpx;
		padding: 0 100rpx;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.15);
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: white;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;

		.tab_item {
			color: #999999;
			position: relative;

			.t_i_text {}

			.t_i_line {
				width: 52rpx;
				height: 8rpx;
				margin: 8rpx auto 0;
				background: #FF534E;
				border-radius: 4rpx;

			}
		}

		.tab_sel {
			font-weight: 500;
			font-size: 32rpx;
			color: #3D3D3D;
		}
	}

	.info {
		margin: 0 30rpx 40rpx;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 160rpx;
		}

		.item {
			.phone {
				display: flex;
				align-items: center;

				.icon {
					margin-left: 6rpx;
				}
			}

			view {
				margin: 0 0 20rpx 0;

				&:nth-of-type(1) {}

				&:nth-of-type(2) {
					margin: 20rpx 0;
				}

				&:last-child {
					margin: 0;
				}

				text {
					color: #FF6548;
					font-weight: 500;
				}
			}
		}

		.imgs {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: flex-end;

			view {
				display: flex;
				margin-bottom: 50rpx;

				text {
					font-size: 26rpx;
					color: #3F93FF;
				}

				image {
					width: 40rpx;
				}
			}
		}
	}


	// .info {
	// 	margin: 40rpx 30rpx;
	// 	background-color: white;
	// 	border-radius: 12rpx;
	// 	padding: 30rpx 30rpx 58rpx;

	// 	.i_title {
	// 		font-weight: 500;
	// 		font-size: 32rpx;
	// 		color: #E99552;
	// 		line-height: 46rpx;
	// 	}

	// 	.item {
	// 		display: flex;
	// 		justify-content: space-between;
	// 		align-items: center;
	// 		height: 110rpx;
	// 		border-bottom: 2rpx solid #EEEEEE;

	// 		view:nth-of-type(2) {
	// 			font-weight: 500;
	// 		}
	// 	}

	// 	.i_btns {
	// 		display: flex;
	// 		justify-content: space-between;
	// 		margin: 60rpx 10rpx 0;

	// 		view {
	// 			width: 260rpx;
	// 			height: 80rpx;
	// 			line-height: 80rpx;
	// 			text-align: center;
	// 			border-radius: 40rpx;
	// 			font-weight: 500;
	// 			font-size: 32rpx;
	// 			color: #FFFFFF;

	// 			&:nth-of-type(1) {
	// 				background: #E99552;
	// 			}

	// 			&:nth-of-type(2) {
	// 				background: linear-gradient(270deg, #FF5F3B 0%, #FF524F 100%);
	// 			}
	// 		}
	// 	}

	// 	.i_btn_see {
	// 		width: 460rpx;
	// 		height: 80rpx;
	// 		line-height: 80rpx;
	// 		text-align: center;
	// 		background: linear-gradient(270deg, #FF5F3B 0%, #FF524F 100%);
	// 		border-radius: 40rpx;
	// 		font-weight: 500;
	// 		font-size: 32rpx;
	// 		color: #FFFFFF;
	// 		margin: 80rpx auto 0;
	// 	}
	// }

	.box {
		width: 600rpx;
		height: 552rpx;
		background: url('@/static/img/diong.png') no-repeat;
		background-size: contain;
		overflow: hidden;

		.title {
			text-align: center;
			font-weight: 500;
			font-size: 36rpx;
			margin: 180rpx 0 52rpx;
		}

		.text {
			margin: 0 62rpx;
			font-size: 28rpx;
		}

		.btns {
			display: flex;
			justify-content: space-between;

			view {
				width: 220rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				border-radius: 40rpx;
				margin: 52rpx 40rpx;

				&:nth-of-type(1) {
					border: 2rpx solid #FFA19E;
					color: #FF534E;
				}

				&:nth-of-type(2) {
					background: linear-gradient(to right, #F69F60 0%, #FF706D 100%);
					color: white;
				}
			}
		}
	}

	/deep/ .uni-popup__wrapper {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	// .kon {
	// background-color: pink;
	// background-color: #f7f7f7;
	// width: 100%;
	// height: 160rpx;
	// position: fixed;
	// left: 0;
	// top: 120rpx;
	// }

	.search {
		width: 690rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin: 40rpx auto 40rpx;
		font-size: 28rpx;
		// background-color: palegoldenrod;
		// position: fixed;
		// left: 40rpx;
		// top: 120rpx;

		.icon {
			margin: 0 16rpx 0 30rpx;
		}
		
		.pla {
			color: #999999;
		}

		input {
			font-size: 28rpx;
			flex: 1;
		}
		
		.s_btn {
			background: #FF524F;
			color: white;
			font-size: 26rpx;
			width: 80rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			border-radius: 20rpx;
			margin-right: 20rpx;
		}
	}

	.none {
		width: 440rpx;
		display: block;
		margin: 240rpx auto 0;
	}
</style>